

<template>
    <tm-app class="searchCircle">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->

        <view
            style="background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <tm-navbar
            style="postion: relative; z-index: 10"
            :shadow="0"
            color="#fff"
            :height="50"
            :margin="[0, 0]"
            :padding="[0, 0]"
            :fontSize="32"
            title="加入群"
        >
        </tm-navbar>

        <view class="search_box d-flex a-center j-between">
            <view class="search d-flex a-center">
                <image
                    style="width: 30rpx; height: 30rpx"
                    src="/static/nvue/search.png"
                    mode=""
                />
                <input
                    type="text"
                    class="inp"
                    confirm-type="search"
                    @confirm="query1"
                    placeholder-style="color:#ccc;font-size:30rpx;"
                    placeholder="群ID"
                    v-model="queryText1"
                />
            </view>

            <view class="text_btn d-flex a-center" @tap="query1"> 查找 </view>
        </view>

        <scroll-view
            :scroll-y="true"
            class="content"
            :style="{
                top: `calc(50px + 100rpx + ${systemInfo.statusBarHeight}px)`,
            }"
        >
            <view class="nodata" v-show="searched1 && !state.circleList.length">
                <image class="nodata-img" src="/static/img/nodata.png" alt="" />

                <view class="text">竟然什么都没有~</view>
            </view>

            <view
                class="water_card d-flex d-c"
                v-show="state.circleList.length"
                v-for="(circle, index) in state.circleList"
                @tap="goDetail(circle)"
            >
                <view class="img_box psr">
                    <image class="img" :src="circle.photo" mode="aspectFill" />
                    <view
                        class="dot d-flex a-center j-center"
                        :class="[getDotType(circle)]"
                    >
                        <text class="text">{{ circle.labelName }}</text>
                    </view>
                </view>
                <view class="title d-flex d-r a-center j-between">
                    <view class="circle_name d-flex d-r a-center ell">
                        <text class="text ell">{{ circle.name }}</text>
                    </view>

                    <view class="d-flex d-r a-center">
                        <text class="icon">&#xe7c1;</text>
                        <text class="memberCount">{{
                            circle.currentUserCount
                        }}</text>
                    </view>
                </view>
                <view class="newLables d-flex d-r">
                    <view
                        class="label"
                        v-for="tag in circle.tags"
                        :class="TAGS_CLASS_MAP[tag]"
                    >
                        <text class="text">{{ TAGS_TEXT_MAP[tag] }}</text>
                    </view>
                </view>

                <view class="introduction">
                    <text class="text">{{ circle.introduction2 }}</text>
                </view>
            </view>
        </scroll-view>
    </tm-app>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onReady, onShow, onLoad } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { getCircleList } from "@/api/api";
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
const systemConfig: any = systemConfigStore();
const queryText1 = ref("");

const msg: any = ref(null);

const state: any = reactive({
    circleList: [],
});

const goDetail = (circle: any) => {
    const { groupId } = circle;
    uni.navigateTo({
        url: `/pages/discover/discoverDetail?groupId=${groupId}`,
    });
};

const systemInfo: any = systemInfoStore();

const searched1 = ref(false);

const getDotType = (circle: any) => {
    if (!systemConfig.groupTag) {
        return "";
    }

    if (!systemConfig.groupTag.length) {
        return "";
    }

    if (circle.labelName === systemConfig.groupTag[0].slimValue) {
        return "shadow0";
    }

    if (circle.labelName === systemConfig.groupTag[1].slimValue) {
        return "shadow1";
    }

    if (circle.labelName === systemConfig.groupTag[2].slimValue) {
        return "shadow2";
    }

    if (circle.labelName === systemConfig.groupTag[3].slimValue) {
        return "shadow3";
    }

    if (circle.labelName === systemConfig.groupTag[4].slimValue) {
        return "shadow4";
    }
};

const TAGS_TEXT_MAP = ref({
    1: "千人好评",
    2: "五百好评",
    3: "百人好评",
    4: "同城",
    5: "实名认证",
    6: "游客开启",
    7: "免费",
    8: "新群",
    9: "人气",
});

const TAGS_CLASS_MAP = ref({
    1: "hp",
    2: "hp",
    3: "hp",
    4: "tc",
    5: "smrz",
    6: "yk",
    7: "mf",
    8: "xq",
    9: "rq",
});

const calcTags = (row: any) => {
    let tags = [];
    const {
        appraiseCount,
        isSameCity,
        isRealName,
        isVisitor,
        isPay,
        createTime,
    } = row;

    if (appraiseCount >= 1000) {
        tags.push(1);
    }
    if (500 <= appraiseCount && appraiseCount < 1000) {
        tags.push(2);
    }
    if (100 <= appraiseCount && appraiseCount < 500) {
        tags.push(3);
    }

    if (isSameCity) {
        tags.push(4);
    }

    if (isRealName) {
        tags.push(5);
    }

    if (isVisitor) {
        tags.push(6);
    }

    if (!isPay) {
        tags.push(7);
    }
    if (createTime) {
        const now = new Date().getTime();
        const createTimeStr = new Date(createTime).getTime();

        if (now - createTimeStr < 1209600) {
            tags.push(8);
        }
    }

    return tags.slice(0, 3);
};

const query1 = async () => {
    if (!queryText1.value) {
        return;
    }

    const res: any = await getCircleList({
        queryParam: queryText1.value,
        groupType: 3,
    });
    const { flag, data } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "查询失败，请稍后再试",
            duration: 1500,
        });
        return;
    }

    searched1.value = true;

    if (!data.list.length) {
        uni.showToast({
            icon: "none",
            title: "未找到群",
            duration: 1500,
        });
        searched1.value = false;
    }

    const arr = data.list.map((item: any) => {
        return {
            ...item,
            type: "normal",
            tags: calcTags(item),
            labels: item.label.split(","),
        };
    });

    state.circleList = arr;
};

//100041

onReady(() => {});

onLoad((option: any) => {});

onShow(() => {});
</script>

<style lang="scss" scoped>
.searchCircle {
    .search_box {
        width: 750rpx;
        position: relative;
        background: #fff;
        padding: 20rpx 30rpx;
        height: 100rpx;
        .search {
            width: 600rpx;
            height: 70rpx;
            border-radius: 10rpx;
            background: #f5f5f5;
            padding: 0 30rpx;
            .inp {
                width: 500rpx;
                margin-left: 20rpx;
                font-size: 30rpx;
            }
        }

        .text_btn {
            text-align: right;
            color: #1dc691;
            &:active {
                opacity: 0.7;
            }
        }
    }

    .content {
        position: absolute;
        width: 750rpx;
        left: 0;
        right: 0;
        padding-top: 20rpx;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        padding: 20rpx 30rpx;
        .water_card {
            width: 339rpx;
            background: #fff;
            border-radius: 20rpx;
            margin-bottom: 10rpx;
            overflow: hidden;
            padding-bottom: 20rpx;
            .dot {
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 10;
                width: 110rpx;
                height: 40rpx;
                opacity: 0.9;
                border-top-right-radius: 20rpx;
                .text {
                    font-size: 20rpx;
                    color: #fff;
                }
                &.shadow0 {
                    background: #1dc691;
                }
                &.shadow1 {
                    background: #ff9f26;
                }
                &.shadow2 {
                    background: #905ade;
                }
                &.shadow3 {
                    background: #4c7dfe;
                }
                &.shadow4 {
                    background: #ad3569;
                }
            }
            .img_box {
                position: relative;
                width: 336rpx;
                height: 336rpx;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
            }
            .img {
                width: 336rpx;
                height: 336rpx;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
            }
            .title {
                padding: 0 12rpx;
                height:42rpx;
                margin-top: 15rpx;
                margin-bottom: 15rpx;
                .circle_name {
                    display:flex;
                    flex:1;
                    .text {
                        flex:1;
                        font-size: 30rpx;
                        color: #333;
                        font-weight: 600;
                    }
                }
                .icon {
                    font-size: 36rpx;
                    color: #ccc;
                    margin-right:5rpx;
                }
                .memberCount {
                    color: #999;
                    font-size: 24rpx;
                }
            }
            .newLables {
                padding: 0 12rpx;
                flex-wrap: wrap;
                margin-bottom: 15rpx;
                .label {
                    padding: 3rpx 5rpx;
                    border-radius: 4rpx;
                    margin-right: 6rpx;
                    margin-bottom: 6rpx;
                    .text {
                        font-size: 20rpx;
                    }
                    &.hp {
                        background: #ffe7cf;
                        .text {
                            color: #f48c29;
                        }
                    }
                    &.smrz {
                        background: #d4edff;
                        .text {
                            color: #418aff;
                        }
                    }
                    &.rq {
                        background: #ffdfdb;
                        .text {
                            color: #e55b2e;
                        }
                    }
                    &.xq {
                        background: #e6dcff;
                        .text {
                            color: #6f5ade;
                        }
                    }
                    &.tc {
                        background: #f4dcff;
                        .text {
                            color: #905ade;
                        }
                    }
                    &.mf {
                        background: #d2f4e9;
                        .text {
                            color: #1dc691;
                        }
                    }
                    &.yk {
                        background: #fcebda;
                        .text {
                            color: #f19945;
                        }
                    }
                }
            }

            .introduction {
                padding: 0 12rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                lines: 3;
                .text {
                    font-size: 24rpx;
                    color: #666;
                    line-height: 31rpx;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    lines: 3;
                }
            }
        }
    }
}
</style>
